<script>

import {formatDate} from "../../../util/js/utils";
import {deleteData, getOpinionData} from "./opinionListJs";
import {dictionaryRequest} from "../../../util/js/globalRequestJs";

export default {
  name: "OpinionList",
  data() {
    return {
      multipleSelection: [],
      tableData: [],
      search: {
        type: '',
        important: '',
        adopt: '2',
        createTime: [],
        pageSize: 5,
        currentPage: 1,
      },
      totalNumber: 0,
      types: [],
      importants: [],
      adopts: []
    }
  },
  mounted() {
    this.getSelectData();
    this.searchOpinion();
  },
  methods: {
    formatDate,
    getSelectData() {
      const _this = this;
      // 获取意见类型
      dictionaryRequest('opinion', 'type').then(res => {
        if (res.code === '200') {
          _this.types = res.data;
        } else {
          _this.$message.error('出错了：' + res.msg);
        }
      }).catch(err => {
        _this.$router.push('/framework/error');
        console.log(err);
      })
      // 获取是否为可用反馈
      dictionaryRequest('opinion', 'adopt').then(res => {
        if (res.code === '200') {
          _this.adopts = res.data;
        } else {
          _this.$message.error('出错了：' + res.msg);
        }
      }).catch(err => {
        _this.$router.push('/framework/error');
        console.log(err);
      })
      // 获取是否重要
      dictionaryRequest('opinion', 'important').then(res => {
        if (res.code === '200') {
          _this.importants = res.data;
        } else {
          _this.$message.error('出错了：' + res.msg);
        }
      }).catch(err => {
        _this.$router.push('/framework/error');
        console.log(err);
      })
    },
    // 以下三个是获取选择行及新的页面数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(newSize) {
      this.search.pageSize = newSize;
      this.searchOpinion();
    },
    handleCurrentChange(newPage) {
      this.search.currentPage = newPage;
      this.searchOpinion();
    },
    // 搜索
    searchOpinion() {
      const _this = this;
      getOpinionData(_this.search).then(res => {
        if (res.code === '200') {
          _this.tableData = res.data.data;
          _this.totalNumber = res.data.totalNumber;
        } else {
          _this.$message.error("出错了：" + res.msg);
        }
      }).catch(err => {
        _this.$router.push('/framework/error')
        console.log(err);
      })
    },
    // 清空筛选
    clearSearch() {
      this.search.type = '';
      this.search.adopt = '2';
      this.search.important = '';
      this.search.createTime = [];
      this.searchOpinion();
    },
    // 删除
    deleteOpinion(row) {
      const _this = this;
      let ids = {};
      if(row === undefined){
        if(_this.multipleSelection.length === 0){
          _this.$message.warning("您未选择数据!")
          return false;
        }else{
          ids = _this.multipleSelection.map(row => row.ouuid);
        }
      }else{
        ids.push(row.ouuid);
      }
      _this.$confirm('是否确认删除数据?','提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        deleteData(ids).then(res => {
          if (res.code === '200') {
            _this.$message.success("删除成功！")
          }else{
            _this.$message.error("出错了："+res.msg);
          }
        }).catch(err => {
          _this.$router.push('/framework/error')
          console.log(err);
        })
      }).catch(() => {
        _this.$message.warning("已取消删除数据!")
      })
    }
  }
}
</script>

<template>
  <div id="ol-main-container" class="ol-main-container">
    <div id="ol-assistant-container" class="ol-assistant-container">
      <div id="ol-one-container" class="ol-one-container">
        <!--批量操作按钮容器-->
        <div id="ol-button-container" class="ol-button-container">
          <el-button @click="deleteOpinion(undefined)" type="primary" icon="el-icon-delete" size="small"></el-button>
        </div>
        <!--搜索容器按钮-->
        <div id="ol-search-container" class="ol-search-container">
          <div id="ol-search-select-container">
            <el-select v-model="search.type" style="width: 100px"
                       slot="prepend" placeholder="反馈类型" size="small">
              <el-option
                v-for="option in types"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
            <el-select v-model="search.adopt" style="width: 100px"
                       slot="prepend" placeholder="是否可用" size="small">
              <el-option
                v-for="option in adopts"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
            <el-select v-show=" this.search.adopt === '2' " v-model="search.important" style="width: 100px"
                       slot="prepend" placeholder="重要程度" size="small">
              <el-option
                v-for="option in importants"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </div>
          &nbsp;
          <div id="ol-search-data-container">
            <el-date-picker
              :clearable="false"
              v-model="search.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="创建日期(始)"
              end-placeholder="创建日期(末)"
              size="small"
              style="width:230px">
            </el-date-picker>
          </div>
          &nbsp;
          &nbsp;
          <div id="ol-search-input-container">
            <el-button slot="append" icon="el-icon-search" @click="searchOpinion" size="small">搜索</el-button>
            <el-button slot="append" icon="el-icon-s-help" @click="clearSearch" size="small">清空</el-button>
          </div>
        </div>
      </div>
      <!--表格容器-->
      <div id="ol-table-container" class="ol-table-container">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          height="100%"
          @selection-change="handleSelectionChange">
          <!--====================序号====================-->
          <el-table-column
            type="index"
            width="50"
            align="center">
          </el-table-column>
          <!--====================选中====================-->
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <!--====================o_uuid====================-->
          <el-table-column
            prop="o_uuid"
            v-if=false>
          </el-table-column>
          <!--====================标题====================-->
          <el-table-column
            prop="title"
            label="标题"
            width="120"
            align="center">
          </el-table-column>
          <!--====================类型====================-->
          <el-table-column
            prop="type"
            label="类型"
            width="100"
            align="center">
          </el-table-column>
          <!--====================内容====================-->
          <el-table-column
            prop="content"
            label="内容"
            width="250"
            align="center">
          </el-table-column>
          <!--====================是否可用====================-->
          <el-table-column
            prop="adopt"
            label="是否可用"
            width="80"
            align="center">
            <template slot-scope="scope">
              <span :style="{color: scope.row.adopt === '采纳' ? 'green' : 'red'}">
                {{ scope.row.adopt }}
              </span>
            </template>
          </el-table-column>
          <!--====================重要性====================-->
          <el-table-column
            prop="important"
            label="重要性"
            width="70"
            align="center">
            <template slot-scope="scope">
              {{ scope.row.important === null ? '无' : scope.row.important }}
            </template>
          </el-table-column>
          <!--====================用户id====================-->
          <el-table-column
            prop="uuuid"
            label="用户ID"
            width="120"
            align="center">
          </el-table-column>
          <!--====================创建日期====================-->
          <el-table-column
            prop="createTime"
            label="创建日期"
            width="180"
            align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>
          <!--====================操作====================-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="deleteOpinion(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="ol-page-container" class="ol-page-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.currentPage"
          :page-sizes="[5,10,15,20,50]"
          :page-size="search.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "opinionListCss.css";
</style>
